<template>
  <div class="admin-panel">
    <div class="container">
      <h1>网站配置管理</h1>
      
      <form @submit.prevent="saveSettings" class="admin-form">
        <div class="form-group">
          <label for="adminName">管理员账号:</label>
          <input 
            type="text" 
            id="adminName" 
            v-model="formData.adminName"
            class="form-control"
          >
        </div>
        
        <div class="form-group">
          <label for="pw">密码 (留空不修改):</label>
          <input 
            type="password" 
            id="pw" 
            v-model="formData.pw"
            class="form-control"
          >
        </div>
        
        <div class="form-group">
          <label for="userQQ">QQ号码:</label>
          <input 
            type="text" 
            id="userQQ" 
            v-model="formData.userQQ"
            class="form-control"
          >
        </div>
        
        <div class="form-group">
          <label for="userName">用户名:</label>
          <input 
            type="text" 
            id="userName" 
            v-model="formData.userName"
            class="form-control"
          >
        </div>
        
        <div class="form-group">
          <label for="Webanimation">动画效果:</label>
          <select 
            id="Webanimation" 
            v-model="formData.Webanimation"
            class="form-control"
          >
            <option value="1">启用</option>
            <option value="0">禁用</option>
          </select>
        </div>
        
        <div class="form-group">
          <label for="cssCon">自定义CSS:</label>
          <textarea 
            id="cssCon" 
            v-model="formData.cssCon"
            class="form-control"
            rows="5"
          ></textarea>
        </div>
        
        <div class="form-group">
          <label for="headCon">页头内容:</label>
          <textarea 
            id="headCon" 
            v-model="formData.headCon"
            class="form-control"
            rows="3"
          ></textarea>
        </div>
        
        <div class="form-group">
          <label for="footerCon">页脚内容:</label>
          <textarea 
            id="footerCon" 
            v-model="formData.footerCon"
            class="form-control"
            rows="3"
          ></textarea>
        </div>
        
        <div class="form-group">
          <label for="SCode">安全码:</label>
          <input 
            type="password" 
            id="SCode" 
            v-model="formData.SCode"
            class="form-control"
            required
          >
        </div>
        
        <button type="submit" class="btn-submit">保存配置</button>
      </form>
      
      <div 
        v-if="message" 
        :class="['message', messageType]"
      >
        {{ message }}
      </div>
    </div>
  </div>
</template>

<script>
import apiService from '../services/api'

export default {
  name: 'AdminView',
  data() {
    return {
      formData: {
        adminName: '',
        pw: '',
        userQQ: '',
        userName: '',
        Webanimation: '1',
        cssCon: '',
        headCon: '',
        footerCon: '',
        SCode: ''
      },
      message: '',
      messageType: 'success'
    }
  },
  async mounted() {
    await this.loadSettings()
  },
  methods: {
    async loadSettings() {
      try {
        const response = await apiService.getSettings()
        if (response.status === 'success') {
          const data = response.data
          this.formData.adminName = data.admin.user
          this.formData.userQQ = data.config.userQQ
          this.formData.userName = data.config.userName
          this.formData.Webanimation = data.config.animation.toString()
          this.formData.cssCon = data.diy.cssCon
          this.formData.headCon = data.diy.headCon
          this.formData.footerCon = data.diy.footerCon
        }
      } catch (error) {
        this.showMessage('加载配置失败', 'error')
      }
    },
    
    async saveSettings() {
      try {
        const response = await apiService.updateSettings(this.formData)
        if (response.status === 'success') {
          this.showMessage('保存成功', 'success')
        } else {
          this.showMessage(response.message || '保存失败', 'error')
        }
      } catch (error) {
        this.showMessage('保存失败', 'error')
      }
    },
    
    showMessage(text, type) {
      this.message = text
      this.messageType = type
      setTimeout(() => {
        this.message = ''
      }, 3000)
    }
  }
}
</script>

<style scoped>
.admin-panel {
  padding: 2rem 0;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

h1 {
  text-align: center;
  margin-bottom: 2rem;
  color: #333;
}

.admin-form {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #333;
}

.form-control {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
}

.form-control:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0,123,255,.25);
}

.btn-submit {
  background-color: #007bff;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  width: 100%;
}

.btn-submit:hover {
  background-color: #0056b3;
}

.message {
  padding: 1rem;
  margin-top: 1rem;
  border-radius: 4px;
  text-align: center;
}

.message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
</style>
